<template>
	<view class="container">
		<!-- 充值地址 -->
		<view class="chongzhi_add">
			<view style="width: 50%;">充值地址</view>
			
		</view>
		<view style="border-bottom: 1px solid #CFCFCF;padding-bottom: 17rpx;">
			<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="font-size: 26rpx; text-align: right; margin-right: 18rpx; width: 500rpx;"  @click="copy">
						0x09d2853d240Ebb77d9b98205953E96c614Bb0B60
					</view>
				<view @click="copy">
					<image src="../../../static/jiaoyi/copy.png" style="width: 22rpx; height: 22rpx;" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 充值截图 -->
		<view class="jietu_box">
			<view class="text">上传充值截图</view>
			<view class="jietu_bg"  @tap="uploadImage" v-if="images==''">
				<image class="image" src="../../../static/jiaoyi/jietu.png" mode="widthFix"></image>
			</view>
			<image :src="images" v-else mode="widthFix" style="width: 207rpx;"></image>
		</view>
		<!-- 充值金额 -->
		<view class="price_box">
			<view class="text">充值金额</view>
			
				<input class="input_num" type="text" v-model="num" placeholder="输入充值金额与截图金额一致" :disabled="flag" />
			
		</view>
		<view class="ok" @click="confirm" v-if="flag==false">确认充值</view>
		<view class="ok1"  v-else>正在审核中</view>
	</view>
</template>

<script>
	import {uploadImage} from '@/api/userInfo';
	import {exchangeRecordCheck,exchangeRecordApply} from '@/api/product.js';
	import uniCopy from '@/js_sdk/uni-copy.js';
	export default {
		data() {
			return {
				chongzhi:"0x09d2853d240Ebb77d9b98205953E96c614Bb0B60",
				num:"",
				images:"",
				notclick:"",
				flag:false
				
			}
		},
		onLoad() {
			this.$get(`${exchangeRecordCheck}`,{}).then(r => {
				if(r.data.status==0){
					this.flag=true;
				}else{
					this.flag=false;
				}
				this.isCheck = r.data.data;
				}).catch(() => {
			});
		},
		methods: {
			confirm(){
				if(this.images==''){
					this.$api.msg('请上传图片');
					return;
				}
				if(this.num==''){
					this.$api.msg('请输入充值金额');
					return;
				}
				this.$post(`${exchangeRecordApply}`,{image:this.images,num:this.num}).then(r => {
					console.log(r);
					}).catch(() => {
				});
			},
			copy() {
				uniCopy({
					content: this.chongzhi,
					success: (res) => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000,
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			// 上传充值截图
			uploadImage () {
				if(this.flag==false){
					// 从相册选择图片
					const _this = this;
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album'],
						success: function(res) {
							_this.handleUploadFile(res.tempFilePaths);
						}
					});
				}else{
					uni.showToast({
						title:"正在审核中",
						icon:'none',
						mask:true
					})
				}
				
			},
			// 上传充值截图
			handleUploadFile (data) {
				const _this = this;
				 this.token = uni.getStorageSync('accessToken') || undefined;
			let filePath = data.path || data[0];
			  console.log(filePath)
				uni.uploadFile({
					url : uploadImage,
					filePath,
					name: 'file',
					header: {
						"x-api-key": _this.token,
						"merchant-id": 1
					},
					formData: {
						'access-token': _this.token,
						"merchant-id": 1
					},
					success (r) {
						uni.hideLoading();
						const data = JSON.parse(r.data);
						if (data.code === 200) {
							_this.images = data.data.url;
						
						} else {
							this.$api.msg('data.message')
						}
					}
				 });
			},
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	.container {
		width: 100%;
		padding: 0 30rpx;
	}
	.chongzhi_add {
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: space-between;
		/* border-bottom: 1px solid #CFCFCF; */
		margin-top: 56rpx;
		padding-bottom: 17rpx;
		align-items: center;
	}
	.jietu_box {
		margin-top: 30rpx;
		border-bottom: 1px solid #CFCFCF;
		padding-bottom: 34rpx;
	}
	.text {
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}
	.jietu_bg {
		margin-top: 33rpx;
		width: 207rpx;
		height: 220rpx;
		background: #E2E2E2;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		text-align: center;
	}
	.image {
		width: 65rpx;
		margin-left: 71rpx;
	}
	.price_box {
		display: flex;
		width: 100%;
		margin-top: 38rpx;
		border-bottom: 1px solid #CFCFCF;
		padding-bottom: 34rpx;
		align-items: center;
	}
	.input_num {
		margin-left: 36rpx;
		width: 550rpx; 
		font-size: 26rpx;
	}
	.ok {
		margin: 88rpx auto;
		width: 460rpx;
		height: 88rpx;
		background: #FC9F56;
		border-radius: 8rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.ok1 {
		margin: 88rpx auto;
		width: 460rpx;
		height: 88rpx;
		background: #CFCFCF;
		border-radius: 8rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
	}
</style>
